
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>超酷的jQuery跟随鼠标气泡动画DEMO演示</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style3.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">
<link rel="stylesheet" type="text/css" href="css/style6.css">
<link rel="stylesheet" type="text/css" href="css/stylelogin.css">
<link rel="stylesheet" type="text/css" href="css/styleload.css" >
<link href="css/jquery.jgrowl.min.css" rel="stylesheet" type="text/css">


<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script src="js/jquery.jgrowl.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
	<script type="text/javascript" src="js/jquery.swatchbook.js"></script>
	<script type="text/javascript" src="js/sketch.min.js"></script>
	<script type="text/javascript" src="js/ui.js"></script>
	<script type="text/javascript" src="js/jquery.dropdown.js"></script>
	<script src="js/modernizr.custom.63321.js"></script>
	<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
	<script type="text/javascript" src="js/PisualFumikaLogin.js"></script>

<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body id="body">



	


	<div id="test" style=" position:fixed;top:0px;z-index:20;"></div>



	<div class="container">

		<header>
			<img src="images/fumikaLogo.png" style="top:100px;">

			<div class="support-note">
				<!-- let's check browser support with modernizr -->
				<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
				<span class="no-csstransforms">CSS transforms are not
					supported in your browser</span>
				<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
				<span class="no-csstransitions">CSS transitions are not
					supported in your browser</span> <span class="note-ie">Sorry, only
					modern browsers.</span>
			</div>

		</header>



		<div id="sb-container" class="sb-container">

			<div>
				<span class="sb-icon icon-cog"></span>
				<h4>
					<span>All Settings</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-flight"></span>
				<h4>
					<span>User Modes</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-eye"></span>
				<h4>
					<span>Browse All</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-install"></span>
				<h4>
					<span>Install App</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-bag"></span>
				<h4>
					<span>Productivity</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-globe"></span>
				<h4>
					<span>All Options</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-picture"></span>
				<h4>
					<span>User Images</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-video"></span>
				<h4>
					<span>User Videos</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-download"></span>
				<h4>
					<span>Download App</span>
				</h4>
			</div>
			<div>
				<span class="sb-icon icon-mobile"></span>
				<h4>
					<span>Mobile Theme</span>
				</h4>
			</div>
			<div onclick="login();">
				<span class="sb-icon icon-camera"></span>
				<h4>
					<span>Login SYstem</span>
				</h4>
			</div>
			<div>
				<h4>
					<span>Profile</span>
				</h4>
				<span class="sb-toggle">Click to open</span>

			</div>


		</div>
		<!-- sb-container -->

	</div>


	<div id="Login"
		style="position:fixed;z-index:999;text-align:center;visibility:hidden;top:20%;left:35%;">
		<div>
			<select id="cd-dropdown" class="cd-select">
				<option value="-1" selected>Select You Login Method</option>
				<option value="1" class="icon-camera">Safe Login Model!</option>
				<option value="2" class="icon-diamond">Normel Login Model!</option>
				<option value="3" class="icon-rocket">Remote Login Model!</option>
				<option value="4" class="icon-star">Login Out!</option>
				<option value="5" class="icon-clock">Forget Password</option>
			</select>
		</div>
	</div>

	<div id="LoginForm"
		style="position:fixed;z-index:10000;top:30%;left:37%;display:none;">
		<form class="form-5 clearfix" id="Safelogin">
			<p>
				<input type="text" id="username" name="username" placeholder="Username">
				<input type="password" name="password" id="password"
					placeholder="Password"> <input type="password"
					name="SafeNum" id="password" placeholder="SafeNum">
			</p>
			<button type="button" name="submit" style="height:153px" onclick="PostJsonAjax('../login')">
				<i class="icon-arrow-right"></i> <span>Sign in</span>
			</button>
			</form>
	</div>


	

	<script type="text/javascript">
		$(function() {

			$('#cd-dropdown').dropdown({
				gutter : 5,
				stack : false,
				delay : 100,
				slidingIn : 100
			});

		});
	</script>

	<script type="text/javascript">
		$(function() {

			$('#sb-container').swatchbook({
				// number of degrees that is between each item
				angleInc : 15,
				neighbor : 15,
				// if it should be closed by default
				initclosed : true,
				// index of the element that when clicked, triggers the open/close function
				// by default there is no such element
				closeIdx : 11
			});

		});
	</script>

	<script>
		// ----------------------------------------
		// Particle
		// ----------------------------------------

		function Particle(x, y, radius) {
			this.init(x, y, radius);
		}

		Particle.prototype = {

			init : function(x, y, radius) {

				this.alive = true;

				this.radius = radius || 10;
				this.wander = 0.15;
				this.theta = random(TWO_PI);
				this.drag = 0.92;
				this.color = '#fff';

				this.x = x || 0.0;
				this.y = y || 0.0;

				this.vx = 0.0;
				this.vy = 0.0;
			},

			move : function() {

				this.x += this.vx;
				this.y += this.vy;

				this.vx *= this.drag;
				this.vy *= this.drag;

				this.theta += random(-0.5, 0.5) * this.wander;
				this.vx += sin(this.theta) * 0.1;
				this.vy += cos(this.theta) * 0.1;

				this.radius *= 0.96;
				this.alive = this.radius > 0.5;
			},

			draw : function(ctx) {

				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		};

		// ----------------------------------------
		// Example
		// ----------------------------------------

		var MAX_PARTICLES = 280;
		var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
				'#FF4E50', '#F9D423' ];

		var particles = [];
		var pool = [];

		var demo = Sketch.create({
			container : document.getElementById('test')
		});

		demo.setup = function() {

			// Set off some initial particles.
			var i, x, y;

			//  for ( i = 0; i < 20; i++ ) {
			x = (demo.width * 0.5) + random(-100, 100);
			y = (demo.height * 0.5) + random(-100, 100);
			demo.spawn(0, 999);
			// }
		};

		demo.spawn = function(x, y) {

			if (particles.length >= MAX_PARTICLES)
				pool.push(particles.shift());

			particle = pool.length ? pool.pop() : new Particle();
			particle.init(x, y, random(5, 40));

			particle.wander = random(0.5, 2.0);
			particle.color = random(COLOURS);
			particle.drag = random(0.9, 0.99);

			theta = random(TWO_PI);
			force = random(2, 8);

			particle.vx = sin(theta) * force;
			particle.vy = cos(theta) * force;

			particles.push(particle);
		};

		demo.update = function() {

			var i, particle;

			for (i = particles.length - 1; i >= 0; i--) {

				particle = particles[i];

				if (particle.alive)
					particle.move();
				else
					pool.push(particles.splice(i, 1)[0]);
			}
		};

		demo.draw = function() {

			demo.globalCompositeOperation = 'lighter';

			for ( var i = particles.length - 1; i >= 0; i--) {
				particles[i].draw(demo);
			}
		};

		demo.mousemove = function() {

			var particle, theta, force, touch, max, i, j, n;

			for (i = 0, n = demo.touches.length; i < n; i++) {

				touch = demo.touches[i], max = random(1, 4);
				for (j = 0; j < max; j++) {
					demo.spawn(touch.x, touch.y);
				}

			}
		};
	</script>

</body>
</html>
